﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
<meta charset="UTF-8">
<title>家校互通 - 组织部门</title>
<script type="text/javascript" src="../../../assets/inc/common-meta.inc"></script>
<script type="text/javascript" src="../../../assets/inc/common-css.inc"></script>
<link href="../../../assets/plugins/select2/css/select2.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="../../../assets/plugins/select2/css/select2-bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="../../../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"
	rel="stylesheet" type="text/css" />
<style>
.page-quick-sidebar-wrapper {
	top: 50px;
	bottom: 30px;
	width: 400px;
	right: -400px;
	padding: 0px;
	color: #000;
	background: #fff;
	border: 2px solid #C1C1C1;
	border-radius: 6px 0 0 6px;
	border-right-width: 0px;
	box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
}

.portlet.box {
	border: none;
}

.portlet.box>.portlet-title {
	background-color: #525e64;
	border-radius: 6px 0px 0px 0px;
}

.fa {
	margin-left: 15px;
}

.none {
	display: none;
}

.text-right {
	text-align: right;
}
</style>
</head>
<!-- END HEAD -->

<body
	class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
	<!-- page-top.html -->
	<div class="page-container">
	
    <div class="modal fade  bs-modal-lg" id="basic" tabindex="-1" role="basic" aria-hidden="true">
         <div class="modal-dialog  modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                     <h4 class="modal-title">关联成员</h4>
                 </div>
                 <div class="modal-body">
						<div class="row">
		                    <div class="col-md-12">
		                        <div class="portlet box default" style="border:1px solid #e7ecf1;">
		                            <div class="portlet-body form">
		                                <form class="form-horizontal">
		                                    <div class="form-body">
		                                        <div class="row">
		                                            <div class="col-md-4">
		                                                <div class="form-group">
		                                                    <label class="control-label col-md-4">姓名</label>
		                                                    <div class="col-md-8">
		                                                        <input type="text" class="form-control" v-model="condition.search_LIKE_groupName" placeholder="请输入教职工姓名...">
		                                                    </div>
		                                                </div>
		                                            </div>
		                                            <div class="col-md-4">
		                                                <div class="form-group">
		                                                    <label class="control-label col-md-4">电话</label>
		                                                    <div class="col-md-8">
		                                                        <input type="text" class="form-control" v-model="condition.search_LIKE_tel" placeholder="请输入教职工电话号码...">
		                                                    </div>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </div>
		                                    <div class="form-actions">
		                                        <div class="row">
		                                            <div class="col-md-12 ">
		                                                <div class="pull-right">
		                                                    <button type="button" class="btn btn-sm blue" @click="submit()">
		                                                        <i class="fa fa-search"></i> 查询
		                                                    </button>
		                                                    <button type="button" class="btn btn-sm default" @click="reset()">
		                                                        <i class="fa fa-refresh"></i>重置
		                                                    </button>
		                                                </div>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </form>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		                <div class="row" >
		                    <div class="col-md-12" >
		                        <div class="dataTables_wrapper">
		                            <div class="table-scrollable" >
		                                <table class="table table-striped table-bordered table-hover table-header-fixed " id="sample_1" role="grid" aria-describedby="sample_1_info">
		                                    <thead>
		                                        <tr role="row" >
		                                            <th>
		                                            	<input id="checkAll" type="checkbox">
		                                            </th>
		                                            <th aria-controls="sample_1" class="center col-md-4">教职工姓名</th>
		                                            <th aria-controls="sample_1" class="center col-md-5">电话</th>
		                                            <th aria-controls="sample_1" class="center col-md-3">创建时间</th>
		                                        </tr> 
		                                    </thead>
		                                    <tbody >
		                                        <tr class="gradeX odd" role="row" v-for="item in items" v-cloak>
		                                            <td>
		                                                <input v-model="ids" onchange="checkBoxChange()" value="{{{item.id}}}" type="checkbox">
		                                            </td>
		                                            <td>{{item.name}}</td>
		                                            <td>{{item.mobile}}</td>
		                                            <td>{{item.createTime}}</td>
		                                        </tr>
		                                    </tbody>
		                                    <tfoot>
		                                        <tr>
		                                            <td colspan="7">
		                                                <div class="row" v-cloak>
		                                                    <div class="col-md-3 col-sm-3">
		                                                        <div class="dataTables_info" id="sample_1_info" role="status" aria-live="polite">显示 {{start}} 至 {{end}} 共 {{totalRecords}} 条</div>
		                                                    </div>
		                                                    <div class="col-md-9 col-sm-9">
		                                                        <div class="dataTables_paginate paging_bootstrap_number" id="sample_1_paginate">
		                                                            <ul class="pagination" style="visibility: visible;">
		                                                                <li v-bind:class="{ 'disabled': disableFirst}" class="prev">
		                                                                    <a href="javascript:void(0);" v-on:click="firstClick()" title="First"><i class="fa fa-angle-double-left"></i></a>
		                                                                </li>
		                                                                <li v-bind:class="{ 'disabled': disableFirst}" class="prev">
		                                                                    <a href="javascript:void(0);" v-on:click="prevClick()" title="Prev"><i class="fa fa-angle-left"></i></a>
		                                                                </li>
		                                                                <li v-for="index in indexs" v-bind:class="{'active': curPage == index}"><a v-on:click="btnClick(index)" >{{ index }}</a></li>
		                                                                <li v-bind:class="{ 'disabled':disableLast}" class="next">
		                                                                    <a href="javascript:void(0);" v-on:click="nextClick()" title="Next"><i class="fa fa-angle-right"></i></a>
		                                                                </li>
		                                                                <li v-bind:class="{ 'disabled':disableLast}" class="next">
		                                                                    <a href="javascript:void(0);" v-on:click="lastClick()" title="Last"><i class="fa fa-angle-double-right"></i></a>
		                                                                </li>
		                                                            </ul>
		                                                        </div>
		                                                    </div>
		                                                </div>
		                                            </td>
		                                        </tr>
		                                    </tfoot>
		                                </table>
		                            </div>
		                        </div>
		                    </div>
		                </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>
                     <button type="button" onclick="saveRel();" class="btn blue">保存</button>
                 </div>
             </div>
             <!-- /.modal-content -->
         </div>
         <!-- /.modal-dialog -->
     </div>
	
		<!-- page-left.html -->
		<div class="page-content-wrapper">
			<div class="page-content" id="app">
				<div class="page-bar">
					<ul class="page-breadcrumb">
						<li><a href="#">主页</a> <i class="fa fa-angle-right"></i></li>
						<li><a href="#">组织部门</a> <i class="fa fa-angle-right"></i></li>
						<li><span>部门详情</span></li>
					</ul>
				</div>

				<div class="page-title"></div>
				<div class="portlet box default">
					<div class="portlet-title">
						<div class="caption">
							<i class="fa fa-gift"></i>部门详情
						</div>
                        <div class="actions">
                            <a href="list.html" class="btn default btn-sm"> <i class="fa fa-angle-double-left"></i> 返回</a>
                        </div>
					</div>
				</div>

				<div class="portlet light bordered">
					<div class="row">
						<div class="col-md-6 form-group">
							<div class="col-md-2 text-right">部门名称:</div>
							<div class="col-md-4">教导处</div>
						</div>
						<div class="col-md-6 form-group">
							<div class="col-md-2 text-right">创建时间:</div>
							<div class="col-md-4">2017-05-22 14:05</div>
						</div>
						<div class="col-md-6">
							<div class="col-md-2 text-right">部门描述:</div>
							<div class="col-md-4">描述信息</div>
						</div>
					</div>
					<div class="row">
					</div>
				</div>
				<div class="portlet light bordered">
					<div class="portlet-title">
						<div class="caption">
							<i class="fa fa-users"></i> <span
								class="caption-subject font-dark bold uppercase">部门成员</span>
						</div>
						<div class="actions">
							<a href="javascript:relTeacher();" class="blue btn-sm save"> <i
								class="fa fa-gg"></i>&nbsp;关联成员
							</a>
						</div>
					</div>
					<div class="portlet-body">
						<div class="dataTables_wrapper">
                            <div class="table-scrollable" >
                                <table class="table table-striped table-bordered table-hover table-header-fixed " id="sample_1" role="grid" aria-describedby="sample_1_info">
                                    <thead>
                                        <tr role="row" >
                                            <th>操作</th>
                                            <th aria-controls="sample_1" class="center col-md-4">教职工姓名</th>
                                            <th aria-controls="sample_1" class="center col-md-5">电话</th>
                                            <!-- <th aria-controls="sample_1" class="center col-md-4">所属部门</th> -->
                                            <th aria-controls="sample_1" class="center col-md-2">创建时间</th>
                                        </tr> 
                                    </thead>
                                    <tbody >
                                        <tr class="gradeX odd" role="row" v-for="item in items" v-cloak>
                                            <td>
                                                <a href="javascript:;" @click="del(item)" class="glyphicon glyphicon-remove" title="删除"></a>
                                            </td>
                                            <td>{{item.name}}</td>
                                            <td>{{item.mobile}}</td>
                                            <!-- <td>{{item.departments}}</td> -->
                                            <td>{{item.createTime}}</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="7">
                                                <div class="row" v-cloak>
                                                    <div class="col-md-5 col-sm-5">
                                                        <div class="dataTables_info" id="sample_1_info" role="status" aria-live="polite">显示 {{start}} 至 {{end}} 共 {{totalRecords}} 条</div>
                                                    </div>
                                                    <div class="col-md-7 col-sm-7">
                                                        <div class="dataTables_paginate paging_bootstrap_number" id="sample_1_paginate">
                                                            <ul class="pagination" style="visibility: visible;">
                                                                <li v-bind:class="{ 'disabled': disableFirst}" class="prev">
                                                                    <a href="javascript:void(0);" v-on:click="firstClick()" title="First"><i class="fa fa-angle-double-left"></i></a>
                                                                </li>
                                                                <li v-bind:class="{ 'disabled': disableFirst}" class="prev">
                                                                    <a href="javascript:void(0);" v-on:click="prevClick()" title="Prev"><i class="fa fa-angle-left"></i></a>
                                                                </li>
                                                                <li v-for="index in indexs" v-bind:class="{'active': curPage == index}"><a v-on:click="btnClick(index)" >{{ index }}</a></li>
                                                                <li v-bind:class="{ 'disabled':disableLast}" class="next">
                                                                    <a href="javascript:void(0);" v-on:click="nextClick()" title="Next"><i class="fa fa-angle-right"></i></a>
                                                                </li>
                                                                <li v-bind:class="{ 'disabled':disableLast}" class="next">
                                                                    <a href="javascript:void(0);" v-on:click="lastClick()" title="Last"><i class="fa fa-angle-double-right"></i></a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- page-bottom.html -->
	<script type="text/javascript" src="../../../assets/inc/common-js.inc"></script>
	<script type="text/javascript"
		src="../../../assets/plugins/select2/js/select2.full.min.js"></script>
	<script
		src="../../../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
		type="text/javascript"></script>
	<script
		src="../../../assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
		type="text/javascript"></script>
	<script type="text/javascript"
		src="../../../assets/global/scripts/vue-util.js"></script>
	<script type="text/javascript" src="../data.js"></script>
	<script type="text/javascript" src="script/view.js"></script>
</body>

</html>
